<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html >

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="../css/optstyle.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../js/jquery.js"></script>



	<script type="text/javascript">

        function del(pid) {
            var c=window.confirm("你确定删除该宝贝吗?");
            if(c){
                $.ajax({
                    url:'/front/del',
                    type:'post',
                    data:'productId='+pid,
                    success:function(rs){
                        if(rs=="ok"){
                            document.location.reload();
                        }
                        else{
                            showTip("删除失败！");
                        }

                    }
                })
            }
        }

        function add(pid){
           var t= $("#text_id"+pid).val();
           var s=$("#em_id"+pid).html();
            $("#em_id"+pid).html(s/t*(Number(t)+1));
           total();
		}
        function sub(pid){
            var t= $("#text_id"+pid).val();
            var s=$("#em_id"+pid).html();
            $("#em_id"+pid).html(s/t*(t-1));
            total();
        }

        function buy(){
            var ck=document.getElementsByName("ck");
            var index="";
            var num="";
            for(var i=0;i<ck.length;i++){
                if(ck[i].checked){
                    index+=ck[i].value+";";
                    num+=$("#text_id"+ck[i].value).val()+";";
                }
            }
            var c=window.confirm("你确定要购买这些宝贝吗?");
            if(c){
                document.location="/user/pay?productId="+index+"&num="+num;
            }
        }

        function allDel(){
            var ck=document.getElementsByName("ck");
            var index="";
            for(var i=0;i<ck.length;i++){
                if(ck[i].checked){
                    index+=ck[i].value+";";
                }
            }
            var c=window.confirm("你确定要删除这些宝贝吗?");
            if(c){
                $.ajax({
                    url:'/front/del',
                    type:'post',
                    data:'productId='+index,
                    success:function(rs){
                        if(rs=="ok"){
                            document.location.reload();
                        }
                        else{
                            showTip("删除失败！");
                        }

                    }
                })
            }
        }
        function total() {
            var ck=document.getElementsByName("ck");
            var total=0;
            for(var i=0;i<ck.length;i++){
                if(ck[i].checked){
                    total+=Number($("#em_id"+ck[i].value).html());
                }
            }
            $("#J_Total").html(total);
        }

	</script>

</head>

<body>

<!--顶部导航条 -->
<jsp:include page="../head.jsp"></jsp:include>

<div class="clear"></div>

<!--购物车 -->
<div class="concent">
	<div id="cartTable">
		<div class="cart-table-th">
			<div class="wp">
				<div class="th th-chk">
					<div id="J_SelectAll1" class="select-all J_SelectAll">

					</div>
				</div>
				<div class="th th-item">
					<div class="td-inner">商品信息</div>
				</div>
				<div class="th th-price">
					<div class="td-inner" >单价</div>
				</div>
				<div class="th th-amount">
					<div class="td-inner">数量</div>
				</div>
				<div class="th th-sum">
					<div class="td-inner">金额</div>
				</div>
				<div class="th th-op">
					<div class="td-inner">操作</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>

		<tr class="item-list">
			<div class="bundle  bundle-last ">
				<div class="clear"></div>
				<div class="bundle-main">
					<c:forEach items="${ls}" var="c">
						<ul class="item-content clearfix">
							<li class="td td-chk">
								<div class="cart-checkbox">
									<input type="checkbox" name="ck" id="ck" value="${c.productId }"  >
								</div>
							</li>
							<li class="td td-item">
								<div class="item-pic">
									<a href="#" target="_blank" data-title="" class="J_MakePoint" data-point="tbcart.8.12">
										<img src="${c.productInfoList.productImage}" width="80px" height="80px" class="itempic J_ItemImg"></a>
								</div>
								<div class="item-info">
									<div class="item-basic-info">
										<a href="xxx?productId='+${c.productInfoList.productId}+'" target="_blank" title="" class="item-title J_MakePoint" data-point="tbcart.8.11">${c.productInfoList.productDescription}</a>
									</div>
								</div>
							</li>
							<li class="td td-info">
								<div class="item-props item-props-can">
								</div>
							</li>
							<li class="td td-price">
								<div class="item-price price-promo-promo">
									<div class="price-content">
										<div class="price-line">
											<em class="J_Price price-now" tabindex="0">${c.productInfoList.productPrice}</em>
										</div>
									</div>
								</div>
							</li>
							<li class="td td-amount">
								<div class="amount-wrapper ">
									<div class="item-amount ">
										<div class="sl">
											<input class="min am-btn" name="" type="button" value="-" onclick="sub(${c.productId})" />
											<input class="text_box" id="text_id${c.productId}"  type="text" value="${c.productNumber}" style="width:30px;" />
											<input class="add am-btn" name="" type="button" value="+" onclick="add(${c.productId})" />
                                            <!-- <input id="min" class="am-btn am-btn-default" name="" type="button" onclick="sub(${c.productId})" value="-" />
                                            <input id="text_box" name="text_id${c.productId}"  type="text" value="${c.productNumber}" style="width:30px;" />
                                            <input id="add" class="am-btn am-btn-default" name="" type="button" value="+" onclick="add(${c.productId})"/>-->
										</div>
									</div>
								</div>
							</li>
							<li class="td td-sum">
								<div class="td-inner">
									<em tabindex="0" class="J_ItemSum number" id="em_id${c.productId}">${c.productInfoList.productPrice * c.productNumber}</em>
								</div>
							</li>
							<li class="td td-op">
								<div class="td-inner">
									<a   onclick="del(${c.productId})" data-point-url="#" class="delete">
										删除</a>
								</div>
							</li>
						</ul>
					</c:forEach>

				</div>
			</div>
		</tr>
		<div class="clear"></div>

	</div>
	<div class="clear"></div>

	<div class="float-bar-wrapper">
		<div id="J_SelectAll2" class="select-all J_SelectAll">
			<div class="cart-checkbox">
				<input type="checkbox" name="all_select" value="全选"
					   id="all_select" >
			</div>
			<span>全选</span>
		</div>
		<div class="operations">
			<a href="#" hidefocus="true" class="deleteAll" onclick="allDel()">删除</a>
		</div>
		<div class="float-bar-right">
			<div class="amount-sum">
				<span class="txt">已选商品</span>
				<em id="J_SelectedItemsCount">${fn:length(ls)}</em><span class="txt">件</span>
				<div class="arrow-box">
					<span class="selected-items-arrow"></span>
					<span class="arrow"></span>
				</div>
			</div>
			<div class="price-sum">
				<span class="txt">合计:</span>
				<strong class="price">¥<em id="J_Total" >0.00</em></strong>
			</div>
			<div class="btn-area">
				<a href="#" onclick="buy()" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
					<span>结&nbsp;算</span></a>
			</div>
		</div>

	</div>

	<jsp:include page="../footer.jsp"></jsp:include>

</div>
<script type="text/javascript">
    $("input[name='ck']").change(function() {
        total();
    });
    $("#all_select").change(function() {
        var ck = document.getElementsByName("ck");
        var c = document.getElementById("all_select");
        if (c.checked) {
            for (var i = 0; i < ck.length; i++) {
                ck[i].checked = true;
            }
        }else{
            for (var i = 0; i < ck.length; i++) {
                ck[i].checked = false;
            }
        }
        total();
    });

</script>

</body>

</html>